<template>
  <div class="slot-friends">
    <!-- 好友dialog -->
    <el-dialog
      :modal="false"
      :title="dialogTilte"
      class="friends-dialog"
      :visible="friendsDialogVisible"
      :before-close="closeFriendsDialog"
    >
      <!-- 好友列表 -->
      <div class="friends-list">
        <el-table :data="tableData[currentPage-1]" stripe border style="width: 100%" height="60">
          <el-table-column type="index" :index="indexMethod" label="序号" width="60px"></el-table-column>
          <el-table-column label="昵称" prop="FriendNick"></el-table-column>
          <el-table-column label="头像" width="70px">
            <template slot-scope="scope">
              <el-image style="width: 50px; height: 50px" :src="scope.row.Avatar">
                <div slot="error" class="image-slot">
                  <i style="font-size:50px;" class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="备注名" prop="Memo"></el-table-column>
          <el-table-column label="标签">
            <template slot-scope="scope">
              <el-tag
                class="label"
                v-for="(labelId, index) in formatLabelId(scope.row.LabelIds)"
                :key="index"
                v-text="$options.filters.labelFilter(labelId,labels)"
              ></el-tag>
            </template>
          </el-table-column>
          <el-table-column width="180px">
            <template slot="header" slot-scope="scope">
              <el-button
                size="mini"
                :type="friends.length === friendIdChose.length ? 'success':'info'"
                @click="choseAllFriends"
              >全选</el-button>
              <el-button
                size="mini"
                :type="allCheckState2 ? 'success':'info'"
                @click="choseAllOfPage"
              >选本页</el-button>
              <!-- 一下代码是为了让eslint不报错 没有什么用 -->
              <span v-if="false" v-text="scope.row"></span>
            </template>
            <template slot-scope="scope">
              <!-- 添加群成员 -->
              <div v-if="action === 2">
                <span
                  class="can-not-select"
                  v-if="allReadyMember.indexOf(scope.row.FriendId) >= 0"
                >已经是群成员</span>
                <input
                  v-else
                  type="checkbox"
                  :checked="friendIdChose.indexOf(scope.row.FriendId) >= 0 "
                  @click="choseFriend(scope.row)"
                />
              </div>
              <div v-else-if="action === 3 || action === 10 ">
                <span class="can-not-select" v-if="scope.row.FriendId === currentFriend.Owner">群主</span>
                <input
                  v-else
                  type="checkbox"
                  :checked="friendIdChose.indexOf(scope.row.FriendId) >= 0 "
                  @click="choseFriend(scope.row)"
                />
              </div>
              <input
                v-else
                type="checkbox"
                :checked="friendIdChose.indexOf(scope.row.FriendId) >= 0 "
                @click="choseFriend(scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[50, 100, 150, 200]"
          :page-size="pageSize"
          :pager-count="7"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPage"
        ></el-pagination>
      </div>

      <div class="operation-box">
        <!-- 搜索 -->
        <el-input
          class="search-input"
          prefix-icon="el-icon-search"
          type="text"
          placeholder="请输入内容"
          v-model="search"
          maxlength="20"
          show-word-limit
          @keyup.enter.native="searchChange"
        ></el-input>
        <!-- 标签 -->
        <div class="send-labels">
          <span v-if="labels.length === 0" v-text="'没有标签或者刷新通讯录'"></span>
          <div class="labels scroll" v-else>
            <el-tag
              class="label"
              v-for="(label, index) in labels"
              :key="index"
              v-text="label.LabelName"
              @click="showLabel(label)"
            ></el-tag>
          </div>
        </div>
        <!-- 操作按钮 -->
        <el-button type="primary" class="opration-btn" @click="submit">{{dialogTilte}}</el-button>
      </div>
    </el-dialog>

    <!-- 标签dialog -->
    <el-dialog
      title="标签好友"
      class="filter-dialog"
      :modal="false"
      :visible.sync="dialogSearchVisible"
      :before-close="closeDialog"
    >
      <el-table :data="searchContent" stripe border style="width: 100%" height="60">
        <el-table-column type="index" :index="indexMethod" label="序号" width="60px"></el-table-column>
        <el-table-column label="昵称" prop="FriendNick"></el-table-column>
        <el-table-column label="头像" width="70px">
          <template slot-scope="scope">
            <el-image style="width: 50px; height: 50px" :src="scope.row.Avatar">
              <div slot="error" class="image-slot">
                <i style="font-size:50px;" class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="备注名" prop="Memo"></el-table-column>
        <el-table-column label="标签">
          <template slot-scope="scope">
            <el-tag
              class="label"
              v-for="(labelId, index) in formatLabelId(scope.row.LabelIds)"
              :key="index"
              v-text="$options.filters.labelFilter(labelId,labels)"
            ></el-tag>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot="header" slot-scope="scope">
            <el-button
              size="mini"
              :type="allCheckState ? 'success':'info'"
              @click="choseAllSearchContent"
            >全选</el-button>
            <span v-if="false" v-text="scope.row"></span>
          </template>
          <template slot-scope="scope">
            <!-- 添加群成员 -->
            <div v-if="action === 2">
              <span
                class="can-not-select"
                v-if="allReadyMember.indexOf(scope.row.FriendId) >= 0"
              >已经是群成员</span>
              <input
                v-else
                type="checkbox"
                :checked="friendIdChose.indexOf(scope.row.FriendId) >= 0 "
                @click="choseFriend(scope.row)"
              />
            </div>
            <div v-else-if="action === 3 || action === 10 ">
              <span class="can-not-select" v-if="scope.row.FriendId === currentFriend.Owner">群主</span>
              <input
                v-else
                type="checkbox"
                :checked="friendIdChose.indexOf(scope.row.FriendId) >= 0 "
                @click="choseFriend(scope.row)"
              />
            </div>
            <input
              v-else
              type="checkbox"
              :checked="friendIdChose.indexOf(scope.row.FriendId) >= 0 "
              @click="choseFriend(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      currentPage: 1, // 当前页
      pageSize: 50, // 每页消息数
      friendIdChose: [], // 要发送的好友id
      tags: [], // 标签
      search: '', // 搜索框的内容
      searchContent: [], // 搜索结果
      dialogSearchVisible: false, // 显示搜索的结果
      loading: false,
    }
  },
  props: {
    currentFriend: {
      type: Object,
      required: true,
      default: function () {
        return {}
      }
    },
    friendsDialogVisible: {
      type: Boolean,
      required: true,
      default: false
    },
    dialogTilte: {
      type: String,
      required: true,
      default: '好友列表'
    },
    action: {
      type: [String, Number],
      required: false,
      default: 0
    },
    friends: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  computed: {
    ...mapGetters({
      labels: 'nedb/labels',
      currentWeChatId: 'conversation/currentWeChatId'
    }),
    // 好友总数
    totalPage() {
      return this.friends.length
    },
    // 填充表格数据
    tableData() {
      // 分页 每页50
      let newFriends = []
      let size = this.pageSize
      for (let i = 0; i < this.friends.length; i += size) {
        newFriends.push(this.friends.slice(i, i + size))
      }
      return newFriends
    },
    // 搜索结果是否全选
    allCheckState() {
      let state = this.searchContent.every((x) => {
        return this.friendIdChose.indexOf(x.FriendId) >= 0
      })
      return state
    },
    allCheckState2() {
      let friends = this.tableData[this.currentPage - 1]
      if (friends) {
        return friends.every((x) => {
          return this.friendIdChose.indexOf(x.FriendId) >= 0
        })
      }
      return false
    },
    // 群成员
    allReadyMember() {
      let am = []
      if (this.action === 2) {
        if (this.currentFriend.MemberList) {
          am = [].concat(this.currentFriend.MemberList)
        }
        if (this.currentFriend.WeChatId === this.currentFriend.Owner) {
          am.push(this.currentFriend.WeChatId)
        }
      }
      return am
    }
  },
  methods: {
    formatLabelId(LabelIds) {
      let labelIds = []
      if (LabelIds) {
        labelIds = LabelIds.split(',')
      }
      return labelIds
    },
    // 关闭dialog
    closeFriendsDialog() {
      this.$emit('closeSlotFriends', true)
    },
    // 修改pageSize
    handleSizeChange(val) {
      this.pageSize = val
    },
    // 修改当前页
    handleCurrentChange(val) {
      this.currentPage = val
    },
    // 计算序号
    indexMethod(index) {
      return index + 1;
    },
    // 搜索
    searchChange() {
      let newFriends = []
      let val = this.search
      if (!val) return
      for (const friend of this.friends) {
        if ((friend.FriendNick && friend.FriendNick.indexOf(val) >= 0) || (friend.Memo && friend.Memo.indexOf(val) >= 0)) {
          newFriends.push(friend)
        }
      }
      if (newFriends.length > 0) {
        this.searchContent = newFriends
        this.dialogSearchVisible = true
      } else {
        this.$message.warning('查不到数据！')
      }
    },
    // 显示labels
    showLabel(label) {
      let labelId = label.LabelId.toString()
      let newFriends = []
      for (const friend of this.friends) {
        if (friend.LabelIds) {
          let la = friend.LabelIds.split(',')
          if (la.indexOf(labelId) >= 0) {
            newFriends.push(friend)
          }
        }
      }
      if (newFriends.length > 0) {
        this.searchContent = newFriends
        this.dialogSearchVisible = true
      } else {
        this.$message.warning('没有数据')
      }
    },
    // 关闭searchdialog 之前先清空数据
    closeDialog(done) {
      this.searchContent = []
      done()
    },
    // 选择好友
    choseFriend(friend) {
      let friendId = friend.FriendId
      let fid = this.friendIdChose.indexOf(friendId)
      if (fid >= 0) {
        this.friendIdChose.splice(fid, 1)
      } else {
        this.friendIdChose.push(friendId)
      }
    },
    // 全选
    choseAllFriends() {
      //   if (this.action === 2 || this.action === 10 || this.action === 'NameCard') {
      //     this.$message.info('请单独选择！')
      //     return
      //   }
      if (this.friendIdChose.length >= this.friends.length) {
        this.friendIdChose = []
      } else {
        for (const friend of this.friends) {
          if (this.friendIdChose.indexOf(friend.FriendId) === -1) {
            this.friendIdChose.push(friend.FriendId)
          }
        }
      }
    },
    // 本页全选
    choseAllOfPage() {
      //   if (this.action === 2 || this.action === 10 || this.action === 'NameCard') {
      //     this.$message.info('请单独选择！')
      //     return
      //   }
      let friends = this.tableData[this.currentPage - 1]
      if (this.allCheckState2) {
        for (const friend of friends) {
          let friendId = friend.FriendId
          let fid = this.friendIdChose.indexOf(friendId)
          this.friendIdChose.splice(fid, 1)
        }
      } else {
        for (const friend of friends) {
          let friendId = friend.FriendId
          let fid = this.friendIdChose.indexOf(friendId)
          if (fid < 0) {
            this.friendIdChose.push(friendId)
          }
        }
      }
    },
    // 搜索内容全选
    choseAllSearchContent() {
      //   if (this.action === 2 || this.action === 10 || this.action === 'NameCard') {
      //     this.$message.info('请单独选择！')
      //     return
      //   }
      if (this.allCheckState) {
        for (const friend of this.searchContent) {
          let friendId = friend.FriendId
          let fid = this.friendIdChose.indexOf(friendId)
          this.friendIdChose.splice(fid, 1)
        }
      } else {
        for (const friend of this.searchContent) {
          let friendId = friend.FriendId
          let fid = this.friendIdChose.indexOf(friendId)
          if (fid < 0) {
            this.friendIdChose.push(friendId)
          }
        }
      }
    },
    // 提交按钮
    submit() {
      // 拉人进群，群人数不能超过500
      if (this.action === 2) {
        let al = this.currentFriend.MemberList.length
        let cl = this.friendIdChose.length
        if (al + cl >= 500) {
          this.$message.warning('群人数不能超过500人！')
          return
        }
      }
      // 踢人出群 不能踢群主
      if (this.action === 3) {
        let id = this.friendIdChose.indexOf(this.currentFriend.Owner)
        if (id >= 0) {
          this.friendIdChose.splice(id, 1)
        }
      }
      // 创建群聊 人数并不能大于500
      if (this.action === 8) {
        let id = this.friendIdChose.indexOf(this.currentFriend.Owner)
        if (id >= 0) {
          this.friendIdChose.splice(id, 1)
        }
        if (this.friendIdChose.length >= 500) {
          this.$message.warning('群聊人数不能超过500人！')
          return
        }
      }
      // 转让群主 不能是群主 不能大于一个id
      if (this.action === 10) {
        if (this.friendIdChose.length > 1) {
          this.$message.warning('只能选择一个群成员！')
          return
        } else if (this.friendIdChose.indexOf(this.currentFriend.Owner) >= 0) {
          let id = this.friendIdChose.indexOf(this.currentFriend.Owner)
          this.friendIdChose.splice(id, 1)
        }
      }
      // 发送名片 只能选择一个好友
      if (this.action === "NameCard") {
        if (this.friendIdChose.length > 1) {
          this.$message.warning('只能选择一个好友员！')
          return
        }
      }
      // 至少选择一个群成员|好友
      if (this.friendIdChose.length === 0) {
        this.$message.warning('请选择至少选择一个群成员或好友！')
        return
      }

      let msg = {
        WeChatId: this.currentWeChatId,
      }
      switch (this.action) {
        case 2:
        case 3:
        case 8:
        case 10:
          msg.ChatRoomId = this.currentFriend.UserName
          msg.Action = this.action
          msg.Content = this.friendIdChose.join(',')
          this.$store.dispatch('websocket/ChatRoomActionTask', msg)
          break;
        case 'NameCard':
          msg.FriendId = this.currentFriend.FriendId || this.currentFriend.UserName
          msg.ContentType = this.action
          msg.Content = this.friendIdChose.join(',')
          this.$store.dispatch('websocket/TalkToFriendTask', msg)
          break
        default:
          break;
      }
      this.$message.info('任务已经下发!')
      // 提交任务后关闭dialog
      this.closeFriendsDialog()
    },
  },
  mounted() {
    // if (this.dialogTilte === '拉人进群') {
    // }
  }
}

</script>

<style lang="scss" scoped>
.friends-dialog {
  overflow: hidden;

  ::v-deep .el-dialog {
    width: 80%;
    height: 70%;
    display: flex;
    flex-direction: column;

    .el-dialog__body {
      flex: 1 1 auto;
      padding: 0;
      display: flex;
      overflow: hidden;
    }

    .friends-list {
      flex: 1 1 auto;
      overflow: auto;
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .el-pagination {
        margin: 5px 0;
      }
    }

    .operation-box {
      width: 300px;
      min-width: 300px;
      display: flex;
      flex-direction: column;
      .search-input {
        margin: 0 10px;
        width: auto;
      }
      .send-labels {
        flex: 1 1 auto;
        margin: 7px 10px 7px 10px;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #dcdfe6;
        .labels {
          width: 100%;
          height: 100%;
          overflow-x: hidden;
          overflow-y: auto;
          .label {
            margin: 5px;
            cursor: pointer;
          }
        }
      }
      .opration-btn {
        margin: 0px 10px 7px 10px;
        width: auto;
      }
    }
  }

  ::v-deep .el-table {
    .cell {
      text-overflow: clip;
      .label {
        margin: 2px;
      }
    }
  }
}

.filter-dialog {
  overflow: hidden;
  ::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    max-height: 70%;
    .el-dialog__body {
      height: 100%;
      padding: 0 0;
      display: flex;
      flex-direction: column;
      overflow: auto;
    }
  }
  ::v-deep .el-table .cell {
    text-overflow: clip;
    .label {
      margin: 2px;
    }
  }
}
</style>



